<?php
use yii\bootstrap\ActiveForm;
?>
<link rel="stylesheet" href="../static/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datatables/jquery.dataTables.css" type="text/css">
<link rel="stylesheet" href="../static/css/admin.css" type="text/css">
<link rel="stylesheet" href="../static/jBox/Skins/Metro/jbox.css" type="text/css">
<style>

    .dataTable>tbody>tr>td {
        vertical-align: middle;
        font-size: 0.8em;
        padding: 8px 18px;
    }
    .dataTable>thead>tr>th {
        vertical-align: middle;
        font-size: 0.8em;
    }

    .examine-content .input-group .form-control{
        margin-bottom: 20px;
        height: 30px ;
        line-height: 30px;
    }
    .examine-content button{
        margin: 10px;
    }
    #table_id_example th, td {
        white-space: nowrap;
    }
</style>
<div class="tabs-panel">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    bom名称: <input class="depart-input" id="bomName" style="width: 160px" type="text">&nbsp;
                    产品名称: <input class="depart-input" id="productName" style="width: 160px" type="text">&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="select_button" style="width: 80px;">查询</button>&nbsp;
                    <button type="button" class="btn btn-warning depart-modal" id="reset_button" style="width: 80px;">重置</button>
                </div>
                <div class="box-body">
                    <a type="button" class="btn btn-success depart-modal" href="/develop/bom-dtl" style="width: 80px;">添加</a>
                    <table id="table_id_example" class="display">
                        <thead>
                        <tr>
                            <th style="width: 10%">ID</th>
                            <th style="width: 15%">bom编号</th>
                            <th style="width: 15%">bom名称</th>
                            <th style="width: 15%">产品</th>
                            <th style="width: 13%">版本</th>
                            <th style="width: 13%">状态</th>
                            <th style="width: 19%">备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 固定js -->
<script type="text/javascript" src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../static/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="../static/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="/static/plugins/treeTable/jquery.treetable.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="/static/app/global.js?version=<?=Yii::$app->params['version']?>"></script>
<script>
    var dateTable = null;
    $(function () {
        dateTable = $('#table_id_example').DataTable({
            dom: '<"top">rt<"bottom"flip><"clear">',
            language: {
                "sUrl": '../static/plugins/datatables/language.json'
            },
            "searching": false,
            "processing": true,
            "serverSide": true,
            "scrollCollapse": true,
            "scrollX": true,
            ajax: {
                url: '/develop/bom-list',
                type: 'post',
                data: function (d) {
                    d.bomName = $('#bomName').val();
                    d.productName = $('#productName').val();
                },
                error: getError
            },
            aoColumns: [
                {"data": "AutoId", "bSortable": false},
                {"data": "code", "bSortable": false},
                {"data": "name", "bSortable": false},
                {"data": "productName", "bSortable": false},
                {"data": "version", "bSortable": false},
                {"data": "useFlg", "bSortable": false},
                {"data": "remark", "bSortable": false},
            ],
            columnDefs: [
                {
                    "targets": [0],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        return '<a href="/develop/bom-dtl?id='+data+'">'+data+'</a>';
                    }
                },
                {
                    "targets": [-2],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        if (data == 1) {
                            return '<a href="javascript:changeStayus('+full.AutoId+',0)">启用</a>'
                        }
                        return '<a href="javascript:changeStayus('+full.AutoId+',1)">禁用</a>'
                    }
                }
            ]
        });

        //查询
        $('#select_button').on('click', function () {
            dateTable.ajax.reload();
        });
        //重置
        $("#reset_button").on('click', function () {
            $('#bomName').val('');
            $('#prodctName').val('');
            dateTable.ajax.reload();
        });

        //保存事件
        $('.ajax_add_bom').on('click', function () {

            if ($('#bom_code').val() == '') {
                $.jBox.error('请输入bom编号', '错误');
                return;
            }
            if ($('#bom_name').val() == '') {
                $.jBox.error('请输入bom名称', '错误');
                return;
            }
            if ($('#bom_product').val() == '') {
                $.jBox.error('青选择bom产品', '错误');
                return;
            }
            if ($('#bom_version').val() == '') {
                $.jBox.error('青选择bom版本', '错误');
                return;
            }
            var param = $('#add_bom_form').serialize();
            $.post('/develop/add-bom', param,
                function (data) {
                    if (data.code == 200) {
                        $('#add-bom-modal').modal('hide');
                        $.jBox.tip('操作成功', 'success');
                        dateTable.draw(false);
                    } else {
                        $.jBox.error(data.val, '错误');
                    }
                },
                'json'
            );
        })

    });

    function changeStayus(id, status) {
        $.jBox.confirm('确认操作', "是否继续？", function (v) {
            if (v == 'ok') {
                $.post('/develop/change-status', {id: id, status: status},
                    function (data) {
                        if (data.code == 200) {
                            $.jBox.tip('操作成功', 'success');
                            dateTable.draw(false);
                        } else {
                            $.jBox.error(data.val, '错误');
                        }
                    },
                    'json'
                );
            } else {
                $.jBox.close();
            }
        });
    }

</script>